{extend name="public:base" /}

{block name="css"}
<link href="/static/laydate/theme/default/laydate.css">
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <div id="main" style="width: 100%; height:600px;">

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


{/block}

{block name="js"}
<script src="__ADMIN__/js/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var name_list = `{$name_list}` ? JSON.parse(`{$name_list}`) : [];
    var count_list = `{$count_list}` ? JSON.parse(`{$count_list}`) : [];

    // 指定图表的配置项和数据
    var option = {
        tooltip: {},
        xAxis: {
            data: name_list,
            type: 'category',
            // 设置x轴字体倾斜角度
            // axisLabel: {
            //     rotate: 45,
            // },
            axisLabel: {
                interval: 0,
                rotate: 45,
            }
        },
        yAxis: {},
        series: [{
            name: '人数',
            type: 'bar',
            data: count_list
        }]
    };

    myChart.setOption(option);
</script>
{/block}